<template>
  <div id="createworkordertype">
    <el-row class="nav">
      <i class="el-icon-arrow-left"
         @click="goBack"></i>
      <span class="font-weight rebuild_order"
            :to="{ path: '/workType' }">{{
        $store.state.orderTitle
      }}</span>
    </el-row>
    <el-divider></el-divider>
    <!-- ***************************************基础信息************************************************************* -->
    <el-card shadow="never"
             class="worktypecard">
      <el-form ref="workordertypeformInfo"
               :model="workordertypeformInfo"
               :label-position="labelPosition"
               :label-width="labelWidth"
               :rules="rules">
        <el-form-item label="流程名称"
                      prop="workordertypeName">
          <el-input v-model="workordertypeformInfo.workordertypeName"
                    maxlength="20"
                    show-word-limit
                    placeholder="请输入工单流程名称"></el-input>
        </el-form-item>
        <el-form-item label="流程描述"
                      style="margin-bottom: 10px">
          <el-input v-model="workordertypeformInfo.workordertypeDescripe"
                    type="textarea"
                    placeholder="请输入流程描述信息"></el-input>
        </el-form-item>
        <el-form-item label="流程状态"
                      style="margin-bottom: 0px">
          <el-radio v-model="workordertypeformInfo.workordertypeEnable"
                    label="1">启用</el-radio>
          <el-radio v-model="workordertypeformInfo.workordertypeEnable"
                    label="0">停用</el-radio>
        </el-form-item>
        <el-form-item label="流程可见范围"
                      width="100px"
                      class="visiableRangle"
                      style="margin-bottom: 0px">
          <el-select v-model="
              workordertypeformInfo.workordertypeVisiableRangle.firstClassify
            "
                     placeholder="请选择流程可见范围"
                     @change="
              changeMenuRange(
                workordertypeformInfo.workordertypeVisiableRangle.firstClassify,
                true
              )
            ">
            <el-option v-for="item in dealPersonRange"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <!-- 部门 -->
          <div v-if="deptShow == 'dept'">
            <el-cascader expand-trigger="hover"
                         :options="userOptions"
                         :placeholder="deptShow !== 'dept' ? '请选择' : '请选择部门'"
                         :props="{
                value: 'value',
                label: 'label',
                children: 'children',
                multiple: true,
                checkStrictly: true,
              }"
                         v-model="
                workordertypeformInfo.workordertypeVisiableRangle.userValue
              ">
            </el-cascader>
            <!-- 可见范围处的部门选择到人 -->
            <!--  @change="handleChange(workordertypeformInfo.workordertypeVisiableRangle.userValue,'')" -->
            <!-- <el-select style="width:250px"
                       v-if="workordertypeformInfo.workordertypeVisiableRangle.userValue.length>0 && itemType==='3'"
                       multiple
                       v-model="workordertypeformInfo.workordertypeVisiableRangle.deptUserValue"
                       filterable
                       default-first-option
                       placeholder="请选择员工">
              <el-option :style="{'width':'200px','margin-left':'20px'}"
                         v-for="item in deptUserOptions"
                         :key="item.name"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select> -->
          </div>
          <!-- 其他的 -->
          <el-select style="width: 250px"
                     v-else-if="deptShow !== 'all'"
                     multiple
                     v-model="workordertypeformInfo.workordertypeVisiableRangle.userValue"
                     filterable
                     default-first-option
                     :placeholder="deptShow == 'user' ? '请选择员工' : '请选择角色'">
            <el-option :style="{ 'min-width': '250px', 'margin-left': '20px' }"
                       v-for="item in userOptions"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <!-- ***************************************节点信息************************************************************* -->
    <div class="order_flow_system">
      <span>工单流转配置</span>
    </div>
    <el-card shadow="never"
             class="nodecard">
      <div class="text item"
           style="height: 100%">
        <el-row style="height: 100%">
          <!--左侧节点-->
          <el-col :span="4"
                  style="background: #f4f6f9; height: 100%; padding: 15px">
            <el-row>
              <span class="title-txt">初始节点</span>
              <el-tooltip :disabled="
                  newworkordernodeInfo.nodeName.length < 10 ? true : false
                "
                          :content="newworkordernodeInfo.nodeName"
                          placement="top-start"
                          effect="light">
                <span v-if="newworkordernodeInfo.select"
                      class="selectnodecss"
                      @click="togglenodeselect(newworkordernodeInfo)">{{ newworkordernodeInfo.nodeName }}</span>
                <span v-else-if="!newworkordernodeInfo.select"
                      class="unselectnodecss"
                      @click="togglenodeselect(newworkordernodeInfo)">{{ newworkordernodeInfo.nodeName }}</span>
                <span v-if="!newworkordernodeInfo.nodeName"
                      class="selectnodecss noNodeInfo"
                      @click="togglenodeselect(newworkordernodeInfo)">{{ newworkordernodeInfo.nodeName }}</span>
              </el-tooltip>
            </el-row>
            <el-row>
              <span class="title-txt">流转节点</span>
              <draggable tag="ul"
                         :list="workordernodeInfo"
                         v-bind="{
                  group: { name: 'options' },
                  ghostClass: 'ghost',
                  handle: '.drag-item',
                }"
                         handle=".drag-item">
                <li v-for="(item, index) in workordernodeInfo"
                    :key="index"
                    style="display: flex; align-items: center; padding: 0 2px">
                  <div style="width: 70%">
                    <el-tooltip :disabled="item.nodeName.length < 7 ? true : false"
                                :content="item.nodeName"
                                placement="top-start"
                                effect="light">
                      <span v-if="item.select"
                            class="selectnodecss"
                            @click="togglenodeselect(item, index)">{{ item.nodeName }}</span>
                      <span v-if="!item.select"
                            class="unselectnodecss"
                            @click="togglenodeselect(item, index)">{{ item.nodeName }}</span>
                      <span v-if="!item.nodeName"
                            class="selectnodecss noNodeInfo"
                            @click="togglenodeselect(item, index)">{{ item.nodeNamee }}</span>
                    </el-tooltip>
                  </div>
                  <div style="width: 30%; display: flex; align-items: center">
                    <i class="drag-item"
                       style="font-size: 16px; margin: 0 5px; cursor: move">
                      <i class="iconfont icon-icon_bars"></i>
                    </i>
                    <i class="el-icon-delete delnodebtn"
                       :value="item"
                       @click="deletenode(item)"></i>
                  </div>
                </li>
              </draggable>
            </el-row>
            <el-row>
              <i class="el-icon-circle-plus-outline button"
                 value="添加节点"
                 @click="addnode"
                 :gutter="20">&nbsp;添加节点</i>
              <i class="el-icon-circle-plus-outline button"
                 value="外部流转节点"
                 @click="addExternalNode"
                 :gutter="20">&nbsp;添加外部流转节点</i>
            </el-row>
          </el-col>
          <!--新建工单-->
          <el-col :span="20"
                  style="
              border-left: 1px solid #f7f7f7;
              padding: 20px;
              background: #fff;
              height: 100%;
              overflow: auto;
            "
                  v-show="newworkordernodeInfo.select">
            <el-row class="title-txt">节点属性</el-row>
            <el-row>
              <el-form :label-width="labelWidth"
                       :model="newworkordernodeInfo"
                       ref="newworkordernodeInfo"
                       :rules="rulesTwo">
                <el-form-item label="节点名称"
                              prop="nodeName">
                  <el-input v-model="newworkordernodeInfo.nodeName"
                            style="width: 400px"
                            maxlength="20"
                            show-word-limit
                            placeholder="请输入工单流程名称"></el-input>
                </el-form-item>
                <el-form-item label="工单模板"
                              :prop="
                    newworkordernodeInfo.formKeySign == '0' ? 'formKey' : ''
                  ">
                  <el-radio v-model="newworkordernodeInfo.formKeySign"
                            label="0">
                    <el-select v-model="newworkordernodeInfo.formKey"
                               :disabled="newworkordernodeInfo.formKeySign == '1'"
                               clearable
                               style="width: 380px"
                               @change="
                        getParamsTable(newworkordernodeInfo.formKey, null)
                      ">
                      <el-option v-for="item in formoptions"
                                 :key="item.id + '0'"
                                 :label="item.name"
                                 :value="item.id + ''"></el-option>
                    </el-select>
                  </el-radio>
                </el-form-item>
                <el-form-item label="问题描述">
                  <el-radio v-model="newworkordernodeInfo.formKeySign"
                            label="1">
                    <el-button @click="problemCheckedFun">配置问题分类</el-button>
                  </el-radio>
                </el-form-item>
                <el-form-item label="创建方式"
                              prop="createWay">
                  <el-checkbox v-model="newworkordernodeInfo.createWay">是否添加外部创建</el-checkbox>
                </el-form-item>
                <el-form-item v-if="newworkordernodeInfo.createWay"
                              label="下一步节点"
                              prop="nextNode">
                  <el-select v-model="newworkordernodeInfo.externalCreateNodeId"
                             style="width: 400px">
                    <el-option v-for="nodeitem in workordernodeInfo"
                               :key="nodeitem.uuid"
                               :label="nodeitem.nodeName"
                               :value="nodeitem.uuid + ''"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="newworkordernodeInfo.createWay"
                              label="创建后状态"
                              prop="nextNodeStatus">
                  <el-select v-model="newworkordernodeInfo.externalCreateStatus"
                             style="width: 400px">
                    <el-option v-for="nodeitem in workorderstatus"
                               :key="nodeitem.id"
                               :label="nodeitem.name"
                               :value="nodeitem.id + ''"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </el-row>
            <el-row>
              <el-row class="title-txt">流转动作</el-row>
              <el-row style="margin-left: 30px">
                <el-table :data="newworkordernodeInfo.sequenceFlows"
                          border
                          style="width: 100%; margin-top: 15px">
                  <el-table-column label="名称"
                                   border>
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.name"></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="跳转目标">
                    <template slot-scope="scope">
                      <el-select v-show="
                          scope.row.type === 'tiaozhuan' ||
                          scope.row.type === 'flowOut'
                        "
                                 v-model="scope.row.targetRef">
                        <el-option v-for="nodeitem in workordernodeInfo"
                                   :key="nodeitem.uuid"
                                   :label="nodeitem.nodeName"
                                   :value="nodeitem.uuid + ''"></el-option>
                      </el-select>
                      <!-- 拆分子流程选择 -->
                      <!-- <el-select v-show="scope.row.type === 'fork'"
                                 v-model="scope.row.targetRef">
                        <el-option v-for="nodeitem in workoderTypeList"
                                   :key="nodeitem.id"
                                   :label="nodeitem.name"
                                   :value="nodeitem.id+''"></el-option>
                      </el-select> -->
                    </template>
                  </el-table-column>
                  <el-table-column label="跳转后状态"
                                   style="width: 100%">
                    <template slot-scope="scope">
                      <el-select v-model="scope.row.status">
                        <el-option v-for="item in workorderstatus"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.id + ''"></el-option>
                      </el-select>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作"
                                   width="60">
                    <template slot-scope="scope">
                      <i class="el-icon-delete delsequenceflowbtn"
                         :value="scope.row"
                         @click="
                          deletesequenceflow(
                            newworkordernodeInfo,
                            scope.row.uuid
                          )
                        "></i>
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
              <el-row style="margin-left: 30px">
                <i v-for="(item, index) of flowtypeinfo"
                   :key="index"
                   class="el-icon-circle-plus-outline button sequence_flow_btn"
                   v-show="item.startShow && item.btnShow"
                   @click="addsequenceflow(newworkordernodeInfo, item)">&nbsp;&nbsp;{{ item.name + '按钮' }}</i>
              </el-row>
            </el-row>
            <el-row v-if="newworkordernodeInfo.createWay">
              <el-row class="title-txt">参数配置</el-row>
              <el-row>
                <el-col>
                  <el-button type="primary"
                             class="el-button el-button--primary el-button--medium h30Btn"
                             @click="statusConvertDshow(newworkordernodeInfo.formKey)">参数转换</el-button>
                </el-col>
              </el-row>
            </el-row>
          </el-col>
          <!--新建流转节点-->
          <el-col :span="20"
                  style="
              border-left: 1px solid #f7f7f7;
              padding: 20px;
              background: #fff;
              height: 100%;
              overflow: auto;
            "
                  v-for="(item, index) in workordernodeInfo"
                  :key="item.index"
                  v-show="item.select">
            <el-row class="title-txt">节点属性</el-row>
            <el-row>
              <!-- 内部流转节点 -->
              <el-form :ref="'workordernodeInfo' + index + ''"
                       :model="workordernodeInfo[index]"
                       v-if="item.nodeSign == 'flowIn'"
                       :rules="rulesThree"
                       :label-width="labelWidth">
                <el-form-item label="节点名称:"
                              prop="nodeName">
                  <el-input v-model="item.nodeName"
                            style="width: 400px"
                            maxlength="20"
                            show-word-limit
                            placeholder="请输入工单流程名称"></el-input>
                </el-form-item>
                <el-form-item label="表单模板:"
                              prop="formKey">
                  <el-select v-model="item.formKey"
                             style="width: 400px">
                    <el-option v-for="item in formoptions"
                               :key="item.id + '1'"
                               :label="item.name"
                               :value="item.id + ''"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="处理人:"
                              class="visiableRangle"
                              prop="assigneetype">
                  <el-select v-model="item.assigneetype"
                             placeholder="请选择"
                             style="width: 250px"
                             @change="changeUserValue(item, index)">
                    <el-option v-for="item in item.menuRange"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                  <!-- 部门数据 -->
                  <div v-if="item.dealDeptShow == 'dept'">
                    <el-cascader v-if="item.dealDeptShow == 'dept'"
                                 expand-trigger="hover"
                                 v-model="item.assignee"
                                 :options="item.userOptions"
                                 default-first-option
                                 :placeholder="
                        item.dealDeptShow == ''
                          ? '请选择'
                          : item.dealDeptShow !== 'dept'
                          ? '请选择'
                          : '请选择部门'
                      "
                                 :props="{
                        value: 'value',
                        label: 'label',
                        children: 'children',
                        multiple: true,
                        checkStrictly: true,
                      }"
                                 @change="handleChange(item.assignee, item)">
                    </el-cascader>
                    <el-select style="width: 250px"
                               v-if="item.assignee.length > 0 && itemType == '3'"
                               multiple
                               v-model="item.deptUserValue"
                               filterable
                               default-first-option>
                      <el-option :style="{ 'min-width': '200px', 'margin-left': '20px' }"
                                 v-for="item in deptUserOptions"
                                 :key="item.name"
                                 :label="item.name"
                                 :value="item.id">
                      </el-option>
                    </el-select>
                  </div>
                  <!-- 其他的数据 -->
                  <el-select style="width: 250px"
                             v-else
                             multiple
                             default-first-option
                             v-model="item.assignee"
                             filterable
                             :placeholder="
                      dealDeptShow == ''
                        ? '请选择'
                        : dealDeptShow == 'user'
                        ? '请选择员工'
                        : '请选择角色'
                    ">
                    <el-option v-for="item in item.userOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="分配方式:"
                              clearable
                              prop="handleMethods">
                  <el-radio v-model="item.handleMethods"
                            v-for="itemHandle in handleMethodListChange(
                      item.assigneetype
                    )"
                            :label="itemHandle.dictCode"
                            :key="itemHandle.dictCode">{{ itemHandle.dictName }}</el-radio>
                </el-form-item>
                <el-form-item label="处理时长:"
                              prop="dealtime">
                  <el-input v-model="item.dealtime"
                            type="number"
                            min="0"
                            style="width: 200px; margin-right: 10px"></el-input>小时
                </el-form-item>
                <el-form-item label="修改原始表单:"
                              prop="modifyoriginalform">
                  <el-radio v-model="item.modifyoriginalform"
                            label="1">允许</el-radio>
                  <el-radio v-model="item.modifyoriginalform"
                            label="0">禁止</el-radio>
                </el-form-item>
                <!-- <el-form-item label="被查看后状态:"
                              prop="afterviewstatus">
                  <el-select v-model="item.afterviewstatus"
                             style="width: 200px">
                    <el-option v-for="item in workorderstatus"
                               :key="item.id+'1'"
                               :label="item.name"
                               :value="item.id+''"></el-option>
                  </el-select>
                </el-form-item> -->
                <el-row style="padding-bottom: 10px"
                        class="title-txt">按钮动作</el-row>
                <el-row style="margin-left: 30px">
                  <el-table :data="item.sequenceFlows"
                            border>
                    <el-table-column label="名称"
                                     border
                                     min-width="20%">
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="跳转目标"
                                     min-width="30%">
                      <template slot-scope="scope">
                        <el-select v-if="
                            scope.row.type === 'tiaozhuan' ||
                            scope.row.type === 'flowOut'
                          "
                                   v-model="scope.row.targetRef">
                          <el-option v-for="nodeitem in workordernodeInfo"
                                     v-if="nodeitem.uuid !== item.uuid"
                                     :key="nodeitem.uuid"
                                     :label="nodeitem.nodeName"
                                     :value="nodeitem.uuid + ''"></el-option>
                          <!-- <el-option :key="newworkordernodeInfo.uuid"
                                     :label="newworkordernodeInfo.nodeName"
                                     :value="newworkordernodeInfo.uuid + ''"></el-option> -->
                        </el-select>
                        <!-- 拆分子流程选择 -->
                        <!-- <el-select v-show="scope.row.type === 'fork'"
                                   v-model="scope.row.targetRef">
                          <el-option v-for="nodeitem in workoderTypeList"
                                     :key="nodeitem.id"
                                     :label="nodeitem.name"
                                     :value="nodeitem.id+''"></el-option>
                        </el-select> -->
                      </template>
                    </el-table-column>
                    <el-table-column label="跳转后状态"
                                     min-width="30%">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.status">
                          <el-option v-for="item in workorderstatus"
                                     :key="item.id + '2'"
                                     :label="item.name"
                                     :value="item.id + ''"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作"
                                     min-width="10%">
                      <template slot-scope="scope">
                        <i class="el-icon-delete delsequenceflowbtn"
                           :value="scope.row"
                           @click="deletesequenceflow(item, scope.row.uuid)"></i>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-row>
                <el-row style="margin-left: 30px">
                  <i v-for="item1 of flowtypeinfo"
                     :key="item1"
                     class="el-icon-circle-plus-outline button sequence_flow_btn"
                     v-show="item1.btnShow"
                     @click="addsequenceflow(item, item1)">&nbsp;&nbsp;{{ item1.name + '按钮' }}</i>
                </el-row>
              </el-form>
              <!-- 外部流转节点 -->
              <el-form :ref="'workordernodeInfo' + index + ''"
                       :model="workordernodeInfo[index]"
                       v-if="item.nodeSign == 'flowOut'"
                       :rules="rulesFour"
                       :label-width="labelWidth">
                <el-form-item label="节点名称:"
                              prop="nodeName">
                  <el-input v-model="item.nodeName"
                            style="width: 400px"
                            maxLenth="20"
                            show-word-limit
                            placeholder="请输入工单流程名称"></el-input>
                </el-form-item>
                <el-form-item label="表单模板:"
                              prop="formKey">
                  <el-select v-model="item.formKey"
                             @change="getParamsTable(item.formKey, index)"
                             style="width: 400px">
                    <el-option v-for="item in formoptions"
                               :key="item.id + '1'"
                               :label="item.name"
                               :value="item.id + ''"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="转入后状态:"
                              clearable
                              prop="flowInStatus">
                  <el-select v-model="item.flowInStatus"
                             placeholder="请选择"
                             clearable
                             style="width: 400px">
                    <el-option v-for="item in workorderstatus"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="下一步节点:"
                              clearable
                              prop="afterFlowNode">
                  <el-select v-model="item.afterFlowNode">
                    <el-option v-if="nodeitem.uuid !== item.uuid"
                               v-for="nodeitem in workordernodeInfo"
                               :key="nodeitem.uuid"
                               :label="nodeitem.nodeName"
                               :value="nodeitem.uuid"></el-option>
                    <el-option :label="newworkordernodeInfo.nodeName"
                               :value="newworkordernodeInfo.uuid"></el-option>
                  </el-select>
                </el-form-item>
                <el-row style="padding-bottom: 10px"
                        class="title-txt">接口配置</el-row>
                <el-form-item label="转入接口:"
                              class="form_item_btn">
                  <el-button type="primary"
                             class="el-button el-button--primary el-button--medium h30Btn"
                             @click="flowInApi(index)">查看</el-button>
                </el-form-item>
                <el-form-item label="转出接口:"
                              prop="flowOutApi"
                              class="form_item_btn">
                  <el-button type="primary"
                             @click="flowOutApi(index)"
                             class="el-button el-button--primary el-button--medium h30Btn">配置</el-button>
                </el-form-item>
                <el-form-item label="参数转换:"
                              class="form_item_btn">
                  <el-button type="primary"
                             @click="setOptions(index)"
                             class="el-button el-button--primary el-button--medium h30Btn">配置</el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-row style="text-align: right; width: 80%; margin: auto; margin-top: 10px"
            v-if="$store.state.orderTitle != '查看工单流程'">
      <el-button type="primary"
                 class="el-button el-button--primary el-button--medium h30Btn"
                 @click="cancelxml">取消</el-button>
      <el-button type="primary"
                 class="el-button el-button--primary el-button--medium h30Btn"
                 @click="createxml">完成</el-button>
    </el-row>
    <!-- ***************************************弹框部分************************************************************* -->
    <!-- 参数转换的弹框 -->
    <params-map v-if="statusConvertDialog"
                v-dialogDrag
                :workOrderFieldReflect="workOrderFieldReflectTable"
                :indexValue="indexValue"
                @changeShow="paramsDialogShow"></params-map>
    <!-- 问题分类弹框 -->
    <el-dialog title="添加问题分类"
               v-dialogDrag
               :before-close="handleClose"
               :visible.sync="problemDialogShow">
      <problem-dialog :formoptions="formoptions"
                      :tableData="tableData"
                      @cancelDialog="cancelDialog"
                      @changeShow="closeProblemDialog"></problem-dialog>
    </el-dialog>
    <!-- 转入接口 -->
    <el-dialog title="转入接口"
               v-dialogDrag
               v-if="workordernodeInfo && workordernodeInfo[indexValue]"
               :visible.sync="flowInDialogVisible"
               width="50%">
      <el-form label-width="100px"
               v-if="workordernodeInfo[indexValue].flowInApi"
               :model="workordernodeInfo[indexValue].flowInApi">
        <el-form-item label="请求地址">
          <el-input v-model="workordernodeInfo[indexValue].flowInApi.getAddress"></el-input>
        </el-form-item>
        <el-form-item label="请求参数">
          <el-input v-model.trim="workordernodeInfo[indexValue].flowInApi.paramsInfo"
                    type="textarea"
                    :autosize="{ minRows: 4, maxRows: 12 }"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   class="el-button el-button--primary el-button--medium h30Btn"
                   @click="flowInApiInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 转出接口 -->
    <el-dialog title="转出接口"
               v-dialogDrag
               v-if="workordernodeInfo && workordernodeInfo[indexValue]"
               :visible.sync="flowOutDialogVisible"
               width="40%">
      <el-form label-width="100px"
               v-if="workordernodeInfo[indexValue].flowOutApi"
               :model="workordernodeInfo[indexValue].flowOutApi"
               :rules="flowOutRule">
        <el-form-item label="请求地址">
          <el-input v-model="workordernodeInfo[indexValue].flowOutApi.getAddress"></el-input>
        </el-form-item>
        <!-- <el-form-item label="请求头">
          <el-input v-model='workordernodeInfo[indexValue].flowOutApi.headers'
                    type="textarea"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="请求参数">
          <el-input v-model='workordernodeInfo[indexValue].flowOutApi.paramsInfo'
                    type="textarea"></el-input>
        </el-form-item> -->
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   class="el-button el-button--primary el-button--medium h30Btn"
                   @click="flowOutApiInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { externalFlowIntoInterface } from '@/api/workOrderController.js'
import { getUseListByDepartmentId } from '@/api/userController'
import {
  selectAllWorkOrderStatus,
  workOrderTypeCreate,
  selectWorkTypeById,
  workOrderTypeUpdate,
  selectAllRole,
  getTimestamp,
  allFormTemplate,
  selectAllType,
  getWorkOrderFieldMeaning
} from '@/api/createWorkOrderType'
import { userSelectOrder, selectAllMenuVisibleType } from '@/api/typeMenu.js'
import { getDictDetailListByPcode } from '@/api/SysDictController.js'
import problemDialog from '@/views/orderEdit/workType/workTypeDialog/problemDialog'
import paramsMap from './workTypeDialog/paramsMap'
import Draggable from 'vuedraggable'
import { selectByName } from '@/api/workType'
export default {
  name: 'createWorkOrderType',
  data () {
    var character = (rule, value, callback) => {
      var pattern = new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？% ]"
      )
      if (pattern.test(value)) {
        return callback(new Error('流程名称不能包含特殊字符'))
      } else {
        callback()
      }
    }
    return {
      itemType: window.CONFIG.itemType,
      labelWidth: '120px',
      indexValue: -1,
      flowInDialogVisible: false,
      flowOutDialogVisible: false,
      problemChecked: false,
      problemDialogShow: false,
      formKeyChecked: false,
      deptShow: 'all', //可见范围处的显示
      dealDeptShow: '', // 处理人处的显示
      deptUserOptions: [],
      userOptions: [],
      orderDisShow: false, // 处理方法中一次分配的显示
      workoderTypeList: [],
      dealPersonRange: [], // 流程可见范围
      menuRange: [], // 流程可见范围
      handleMethodList: [], // 分配方式列表
      buildOutChecked: false,
      statusConvertDialog: false,
      formArr: ['workordertypeformInfo', 'newworkordernodeInfo'],
      resultArr: [], // 接受验证返回结果数组
      // 表单验证错误提示
      rejectObj: [
        '请输入正确流程名称',
        '请完善初始节点信息',
        '请完善流转节点信息'
      ],
      labelPosition: 'left',
      litileTitle: '新建工单流程',
      workordertypeformInfo: {
        workordertypeUuid: new Date().getTime(),
        workordertypeName: '',
        workordertypeDescripe: '',
        workordertypeEnable: '1',
        workordertypeVisiableRangle: {
          firstClassify: 'all',
          userValue: []
          // deptUserValue: []  部门选择到人
        }
      },
      newworkordernodeInfo: {
        uuid: '',
        select: true,
        nodeid: 1,
        nodeName: '新建工单',
        formKey: '',
        formKeySign: '0', // 0 单一模板 1 问题分类
        createWay: false, // 是否添加外部创建
        externalCreabuteNodeId: '', // 下一步节点
        externalCreateStatus: '', // 下一步状态
        sequenceFlows: [],
        classifyList: [] // 问题分类
      },
      // 参数转换数组
      workOrderFieldReflect: [],
      workOrderFieldReflectTable: [], // 中转数据
      workordernodeInfo: [],
      formoptions: [],
      userList: [],
      flowtypeinfo: [
        {
          type: 'tiaozhuan',
          name: '跳转',
          startShow: true,
          btnShow: true
        },
        {
          type: 'zhuanpai',
          name: '转派',
          startShow: true,
          btnShow: true
        },
        {
          type: 'gaipai',
          name: '改派',
          startShow: false,
          btnShow: true
        },
        {
          type: 'end',
          name: '结束',
          startShow: true,
          btnShow: true
        },
        {
          type: 'save',
          name: '保存',
          startShow: true,
          btnShow: true
        },
        // {
        //   type: 'fork',
        //   name: '拆分子流程',
        //   startShow: true,
        //   btnShow: true
        // },
        {
          type: 'mail',
          name: '邮件回访',
          startShow: false,
          btnShow: true
        },
        {
          type: 'note',
          name: '发送短信',
          startShow: false,
          btnShow: true
        },
        {
          type: 'phone',
          name: '电话回访',
          startShow: false,
          btnShow: true
        },
        {
          type: 'record',
          name: '调听录音',
          startShow: false,
          btnShow: true
        },
        {
          type: 'copy',
          name: '复制工单',
          startShow: false,
          btnShow: false
        },
        {
          type: 'flowOut',
          name: '转出',
          startShow: true,
          btnShow: true
        }
      ],
      workorderstatus: [],
      rules: {
        workordertypeName: [
          {
            required: true,
            message: '请输入工单流程名称',
            trigger: ['blur', 'change']
          },
          { validator: character, trigger: ['blur', 'change'] }
        ]
      },
      rulesTwo: {
        nodeName: [
          {
            required: true,
            message: '请输入节点名称',
            trigger: ['blur', 'change']
          },
          { validator: character, trigger: ['blur', 'change'] }
        ],
        formKey: [
          {
            required: true,
            message: '请选择模板内容',
            trigger: ['blur', 'change']
          }
        ]
        // formKey: [
        //   { required: true, validator: formKeyRule, trigger: 'blur' }
        // ],
        // classifyList: [
        //   { required: false, validator: classifyRule, trigger: 'blur' }
        // ]
      },
      rulesThree: {
        nodeName: [
          {
            required: true,
            message: '请输入节点名称',
            trigger: ['blur', 'change']
          },
          { validator: character, trigger: ['blur', 'change'] }
        ],
        formKey: [
          {
            required: true,
            message: '请选择工单模板',
            trigger: ['blur', 'change']
          }
        ],
        assigneetype: [
          {
            required: true,
            message: '请选择处理人',
            trigger: ['blur', 'change']
          }
        ],
        workorderstatus: [
          {
            required: true,
            message: '请选择被查看后状态',
            trigger: ['blur', 'change']
          }
        ],
        dealtime: [
          {
            required: true,
            message: '请输入处理时长',
            trigger: ['blur', 'change']
          }
        ],
        modifyoriginalform: [{ required: true }],
        afterviewstatus: [
          {
            required: true,
            message: '请选择被查看后状态',
            trigger: ['blur', 'change']
          }
        ],
        handleMethods: [
          {
            required: true,
            message: '请选择处理方式',
            trigger: ['blur', 'change']
          }
        ]
      },
      rulesFour: {
        nodeName: [
          {
            required: true,
            message: '请输入节点名称',
            trigger: ['blur', 'change']
          },
          { validator: character, trigger: ['blur', 'change'] }
        ],
        formKey: [
          {
            required: true,
            message: '请选择工单模板',
            trigger: ['blur', 'change']
          }
        ],
        flowOutStatus: [
          {
            required: true,
            message: '请选择转入后的状态',
            trigger: ['blur', 'change']
          }
        ],
        afterFlowNode: [
          {
            required: true,
            message: '请选择转入后的节点',
            trigger: ['blur', 'change']
          }
        ],
        flowInStatus: [
          {
            required: true,
            message: '请选择转出后的状态',
            trigger: ['blur', 'change']
          }
        ],
        flowOutApi: [
          {
            required: true,
            message: '请添加转出配置信息',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  created () {
    this.listformtemplates()
    this.listworkorderstatus()
    this.getSelectAllType()
    this.getSelectAllMenuVisibleType()
    this.selectOrderTypeId()
    if (this.$store.state.workTypeId) {
      this.selectWorkTypeById()
      this.litileTitle = '编辑工单流程'
    }
    if (!this.$store.state.workTypeId) {
      this.startUuid()
    }
  },
  mounted () {
    this.getDictDetailListByPcodeInfo('distribution_way')
  },
  computed: {
    handleMethodListChange: function () {
      return function (type) {
        let handleMethodList = this.handleMethodList
        if (type != 'user') {
          handleMethodList = this.handleMethodList.filter(
            item => item.dictCode != 'sequence_distribution'
          )
        }
        return handleMethodList
      }
    }
  },
  watch: {
    'newworkordernodeInfo.formKeySign': {
      handler: function (newVal, oldVal) {
        this.newworkordernodeInfo.formKeySign = newVal
        if (this.newworkordernodeInfo.formKeySign === '0') {
          this.newworkordernodeInfo.classifyList = []
          this.tableData = []
        } else {
          this.newworkordernodeInfo.formKey = ''
        }
      },
      deep: true
    }
  },
  components: {
    problemDialog,
    paramsMap,
    Draggable
  },
  methods: {
    handleChange (val, item) {
      let params = {
        departmentIdList: val
      }
      if (this.itemType !== '3') {
        return
      }
      getUseListByDepartmentId(params).then(res => {
        if (res.data.retCode == 200) {
          // this.workordertypeformInfo.workordertypeVisiableRangle.deptUserValue = []
          if (item) {
            item.deptUserValue = []
          }
          this.deptUserOptions = res.data.data
        }
      })
    },
    // 人/角色/部门数据赋值
    selectAlllInfoFun (val) {
      if (val === 'user') {
        return window.CONFIG.selectAllInfo.userList
      } else if (val === 'role') {
        return window.CONFIG.selectAllInfo.roleList
      } else if (val === 'dept') {
        return window.CONFIG.selectAllInfo.deptList
      } else if (val === 'all') {
        return []
      }
    },
    // 参数弹框数据
    paramsDialogShow (e) {
      this.statusConvertDialog = e.show
      let INDEX = e.index
      if (INDEX == -1) {
        this.workOrderFieldReflect = e.data
      } else {
        this.workordernodeInfo[INDEX].setOptions = e.data
      }
    },
    // 初始化新建工单节点时间
    startUuid () {
      getTimestamp().then(res => {
        this.newworkordernodeInfo.uuid = res.data.data
      })
    },
    // 转入接口设置
    flowInApiInfo () {
      this.flowInDialogVisible = false
    },
    externalFlowIntoInterface (index) {
      externalFlowIntoInterface().then(res => {
        if (res.data.retCode == 200) {
          let obj = res.data.data.externalFlowInfo
          this.workordernodeInfo[index].flowInApi.paramsInfo = JSON.stringify(
            obj,
            null,
            4
          )
          this.workordernodeInfo[index].flowInApi.getAddress = JSON.stringify(
            res.data.data.requestUrl
          )
        }
      })
    },
    // 转出接口
    flowOutApiInfo () {
      this.flowOutDialogVisible = false
    },
    // 转入接口
    flowInApi (index) {
      this.indexValue = index
      this.flowInDialogVisible = true
      this.externalFlowIntoInterface(index)
    },
    // 转出接口
    flowOutApi (index) {
      this.indexValue = index
      this.flowOutDialogVisible = true
    },
    // 设置参数
    setOptions (index) {
      this.indexValue = index
      if (!this.workordernodeInfo[index].formKey) {
        this.$message({
          message: '请选择工单模板',
          type: 'error'
        })
        return
      }
      this.statusConvertDialog = true
      this.workOrderFieldReflectTable = this.workordernodeInfo[index].setOptions
    },
    problemCheckedFun () {
      this.problemDialogShow = true
    },
    cancelDialog (e) {
      this.problemDialogShow = e
    },
    closeProblemDialog (e) {
      this.problemDialogShow = e.show
      this.newworkordernodeInfo.classifyList = e.data
    },
    // 分配方式
    getDictDetailListByPcodeInfo (id) {
      getDictDetailListByPcode(id).then(res => {
        if (res.data.retCode === 200) {
          this.handleMethodList = res.data.data
        }
      })
    },
    // 流程可见范围
    getSelectAllMenuVisibleType () {
      selectAllMenuVisibleType().then(res => {
        if (res.data.retCode === 200) {
          this.dealPersonRange = res.data.data
        }
      })
    },
    // 获取流程可见范围
    getUserSelectOrder (val, bool) {
      this.deptShow = val
      this.userOptions = []
      this.userOptions = this.selectAlllInfoFun(val)
      if (!bool) {
        this.workordertypeformInfo.workordertypeVisiableRangle.userValue = []
      }
      // userSelectOrder(val).then(res => {
      //   if (res.data.retCode === 200 && res.data.data) {
      //     this.userOptions = res.data.data
      //     this.userValue = []
      //     if (!bool) {
      //       this.workordertypeformInfo.workordertypeVisiableRangle.userValue = []
      //     }
      //   }
      // })
    },
    // 获取其他类型id
    selectOrderTypeId () {
      let params = {
        currentPage: 1,
        name: '',
        pageSize: 100
      }
      selectByName(params).then(res => {
        let data = res.data
        if (data.retCode === 200) {
          this.workoderTypeList = data.data.list
        } else {
        }
      })
    },
    // 流程可见范围
    changeMenuRange (val, bool) {
      this.deptShow = val
      this.userOptions = []
      this.workordertypeformInfo.workordertypeVisiableRangle.userValue = []
      this.getUserSelectOrder(val, bool)
    },
    // 返回到上一步
    goBack () {
      this.$router.push('/workType')
    },
    getSelectAllType () {
      selectAllType().then(res => {
        this.menuRange = res.data.data
        if (window.CONFIG.itemType === '3') {
          this.menuRange = [
            { value: 'dept', label: '部门' },
            { value: 'role', label: '角色' }
          ]
        }
      })
    },
    // 参数转换封装
    statusConvertDshowFun (formKey, index) {
      getWorkOrderFieldMeaning(formKey).then(res => {
        if (res.data.retCode === 200) {
          if (index !== null) {
            this.workordernodeInfo[index].setOptions = res.data.data
          } else {
            this.workOrderFieldReflect = res.data.data
          }
        }
      })
    },
    getParamsTable (val, index) {
      this.statusConvertDshowFun(val, index)
    },
    // 参数转换弹窗
    statusConvertDshow (val) {
      this.indexValue = -1
      if (!val) {
        this.$message({
          message: '请选择工单模板',
          type: 'error'
        })
        return
      }
      this.statusConvertDialog = true
      this.workOrderFieldReflectTable = this.workOrderFieldReflect
    },
    // 查询工单模板列表和表单模板列表
    listformtemplates () {
      allFormTemplate().then(res => {
        if (res.data.retCode === 200) {
          this.formoptions = res.data.data
        }
      })
    },
    // 查询跳转后状态和被查看后状态
    listworkorderstatus () {
      selectAllWorkOrderStatus().then(res => {
        let data = res.data
        if (data.retCode === 200) {
          this.workorderstatus = data.data
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      })
    },
    // 查询点击编辑后当前条的信息
    selectWorkTypeById () {
      selectWorkTypeById(this.$store.state.workTypeId).then(res => {
        let data = res.data
        if (data.retCode === 200) {
          // 编辑时更新工单流程uuid
          getTimestamp().then(res => {
            this.workordertypeformInfo.workordertypeUuid = res.data.data
          })
          this.workordertypeformInfo = data.data.workordertypeformInfo
          this.workOrderFieldReflect = data.data.workOrderFieldReflect
          this.getUserSelectOrder(
            this.workordertypeformInfo.workordertypeVisiableRangle
              .firstClassify,
            true
          )
          this.newworkordernodeInfo = data.data.newworkordernodeInfo
          this.tableData = this.newworkordernodeInfo.classifyList
          // 请求接口同步最新用户、角色、部门数据
          let workordernodeInfos = data.data.workordernodeInfo
          data.data.workordernodeInfo.forEach((item, index) => {
            if (item.nodeSign === 'flowIn') {
              this.handleChange(item.assignee, '')
            }
            if (this.itemType === '3') {
              item.menuRange = item.menuRange.filter(x => x.value !== 'user')
              if (item.assigneetype === 'user') {
                item.assigneetype = ''
                item.assignee = []
              }
            }
            // userSelectOrder(item.assigneetype).then(res => {
            //   if (res.data.retCode === 200 && res.data.data) {
            //     workordernodeInfos[index].userOptions = res.data.data
            //   }
            // })
          })
          this.workordernodeInfo = workordernodeInfos
          // 当前节点数据为部门时候的筛选
          if (this.workordernodeInfo) {
            for (var i = 0; i < this.workordernodeInfo.length; i++) {
              if (this.workordernodeInfo[i].assigneetype == 'dept') {
                this.dealDeptShow = 'dept'
              }
            }
          }
          // this.previousId = data.data.uuid
          this.userId = data.data.userId
          this.newworkordernodeInfo.sequenceFlows.forEach(function (
            item,
            index
          ) {
            getTimestamp().then(res => {
              item.uuid = res.data.data
            })
          })
        }
      })
    },
    // 右侧表单的显示切换
    togglenodeselect (item, index) {
      if (index) {
        this.workOrderFieldReflectTable = this.workordernodeInfo[
          index
        ].setOptions
      } else {
        this.workOrderFieldReflectTable = this.workOrderFieldReflect
      }
      this.newworkordernodeInfo.select = false
      for (let i = 0; i < this.workordernodeInfo.length; i++) {
        this.workordernodeInfo[i].select = false
      }
      item.select = true
    },
    // 添加外部流转节点
    addExternalNode () {
      this.newworkordernodeInfo.select = false
      for (let i = 0; i < this.workordernodeInfo.length; i++) {
        this.workordernodeInfo[i].select = false
      }
      let nodeinfo = {
        uuid: '',
        nodeSign: 'flowOut',
        select: true,
        nodeid: 5,
        nodeName: '外部流转节点',
        formKey: '', // 工单模板
        // flowOutStatus: '',
        flowInStatus: '', // 转入后状态
        afterFlowNode: '', // 下一步节点
        flowOutApi: {
          // 转出配置
          getAddress: '',
          paramsInfo: '123123'
          // headers: ''
        },
        flowInApi: {
          // 转入配置
          getAddress: '',
          paramsInfo: ''
        },
        setOptions: {} // 参数设置
      }
      getTimestamp().then(res => {
        nodeinfo.uuid = res.data.data
        this.workordernodeInfo.push(nodeinfo)
      })
      this.formArr.push('workordernodeInfo' + this.workordernodeInfo.length)
    },
    // 新建节点
    addnode () {
      this.newworkordernodeInfo.select = false
      let _this = this
      for (let i = 0; i < this.workordernodeInfo.length; i++) {
        this.workordernodeInfo[i].select = false
      }
      let nodeinfo = {
        uuid: '',
        nodeSign: 'flowIn', // 流转节点/内节点的标识
        select: true,
        nodeid: 5,
        nodeName: '新建节点',
        formKey: '',
        assigneetype: '',
        assignee: [],
        dealtime: '',
        nameList: '',
        modifyoriginalform: '0',
        afterviewstatus: '11',
        sequenceFlows: [],
        userValue: [],
        menuRange: this.menuRange,
        userOptions: [],
        handleMethods: 'work_order_pool', // 处理方式
        dealDeptShow: ''
      }
      if (this.itemType === '3') {
        nodeinfo.deptUserValue = []
      }
      getTimestamp().then(res => {
        nodeinfo.uuid = res.data.data
        _this.workordernodeInfo.push(nodeinfo)
      })
      this.formArr.push('workordernodeInfo' + this.workordernodeInfo.length)
    },
    deletenode (item) {
      for (let i = 0; i < this.workordernodeInfo.length; i++) {
        if (this.workordernodeInfo[i].uuid === item.uuid) {
          this.workordernodeInfo.splice(i, 1)
          let selectIndex
          this.workordernodeInfo.filter((currentValue, index) => {
            if (currentValue.select === true) {
              selectIndex = index
              return selectIndex
            }
          })
          if (!selectIndex) {
            if (this.workordernodeInfo[i - 1]) {
              this.workordernodeInfo[i - 1].select = true
            }
          }
          if (this.workordernodeInfo.length === 0) {
            this.newworkordernodeInfo.externalCreateNodeId = ''
            this.newworkordernodeInfo.select = true
          }
        }
      }
    },
    // 切换用户或角色
    changeUserValue (item, index) {
      item.dealDeptShow = item.assigneetype
      item.userOptions = item.assignee = []
      // window全局缓存的数据
      item.userOptions = this.selectAlllInfoFun(item.assigneetype)
      // 接口请求返回的数据
      // selectAllRole(item.assigneetype).then(res => {
      //   item.userOptions = res.data.data
      // })
      // 如果是用户，改变处理方法的的值
      if (item.assigneetype === '用户') {
        this.orderDisShow = true
        this.workordernodeInfo[index].handleMethods = 'sequence_distribution'
      } else {
        this.orderDisShow = false
        this.workordernodeInfo[index].handleMethods = 'work_order_pool'
      }
    },
    addsequenceflow (item, flowtypeinfo) {
      let targetRef = flowtypeinfo.type === 'end' ? 'endEvent' : ''
      let sequenceflow = {
        uuid: new Date().getTime(),
        id: item.uuid,
        type: flowtypeinfo.type,
        name: flowtypeinfo.name,
        sourceRef: item.uuid,
        targetRef: targetRef,
        status: ''
      }
      getTimestamp().then(res => {
        sequenceflow.uuid = res.data.data
        sequenceflow.id = res.data.data
        item.sequenceFlows.push(sequenceflow)
      })
    },
    deletesequenceflow (item, uuid) {
      for (let i = 0; i < item.sequenceFlows.length; i++) {
        if (item.sequenceFlows[i].uuid === uuid) {
          item.sequenceFlows.splice(i, 1)
        }
      }
    },
    // 取消提交
    cancelxml () {
      this.$router.go(-1)
    },
    // 提交表单
    createxml () {
      if (
        !this.workordernodeInfo.length > 0 &&
        this.newworkordernodeInfo.sequenceFlows.length > 0
      ) {
        this.newworkordernodeInfo.sequenceFlows.forEach(item => {
          item.targetRef = ''
        })
      }
      this.resultArr = []
      let that = this
      this.formArr.forEach((item, index) => {
        // 根据表单的ref校验
        if (
          !(item == 'workordertypeformInfo' || item == 'newworkordernodeInfo')
        ) {
          that.refForm(item, that.rejectObj[2])
        } else {
          that.refForm(item, that.rejectObj[index])
        }
      })
      if (this.newworkordernodeInfo.formKeySign == '0') {
        this.newworkordernodeInfo.classifyList = []
        if (!this.newworkordernodeInfo.formKey) {
          this.$message({
            type: 'error',
            message: '请选择工单模板'
          })
          return
        }
      } else if (this.newworkordernodeInfo.formKeySign == '1') {
        this.newworkordernodeInfo.formKey = ''
        if (!this.newworkordernodeInfo.classifyList.length > 0) {
          this.$message({
            type: 'error',
            message: '请配置问题分类'
          })
          return
        }
      }
      if (
        !that.newworkordernodeInfo.sequenceFlows.length > 0 &&
        !that.newworkordernodeInfo.createWay
      ) {
        that.$message({
          type: 'error',
          message: '请配置初始节点表单按钮流转信息'
        })
        return
      }
      for (var i = 0; i < that.newworkordernodeInfo.sequenceFlows.length; i++) {
        let item = that.newworkordernodeInfo.sequenceFlows[i]
        if (item.type === 'flowOut' || item.type === 'tiaozhuan') {
          if (
            !item.targetRef ||
            !item.status ||
            typeof item.targetRef == Number ||
            typeof item.status == Number
          ) {
            that.$message({
              type: 'error',
              message: '完善初始节点表单按钮流转信息'
            })
            return
          }
        }
      }
      if (that.workordernodeInfo.length > 0) {
        for (var x = 0; x < that.workordernodeInfo.length; x++) {
          if (that.workordernodeInfo[x].sequenceFlows) {
            for (
              var y = 0;
              y < that.workordernodeInfo[x].sequenceFlows.length;
              y++
            ) {
              let val = that.workordernodeInfo[x].sequenceFlows
              if (val[y].type === 'flowOut' || val[y].type === 'tiaozhuan') {
                if (
                  !val[y].targetRef ||
                  !val[y].status ||
                  typeof val[y].targetRef == Number ||
                  typeof val[y].status == Number
                ) {
                  that.$message({
                    type: 'error',
                    message: '完善流转节点表单按钮流转信息'
                  })
                  return
                }
              }
            }
          }
        }
      }
      Promise.all(that.resultArr)
        .then(function () {
          // 验证全部通过
          that.updata()
        })
        .catch(function (data) {
          // 验证失败 提示reject失败状态的值
          that.$message.error(data)
        })
    },
    // 数据提交
    updata () {
      let data = {
        // xml: result,
        previousId: 0,
        userId: this.$store.state.userId,
        workordertypeformInfo: this.workordertypeformInfo,
        newworkordernodeInfo: this.newworkordernodeInfo,
        workordernodeInfo: this.workordernodeInfo,
        workOrderFieldReflect: this.workOrderFieldReflect
      }
      // 判断是编辑还是新增
      if (this.$store.state.workTypeId) {
        data.previousId = this.$store.state.workTypeId
        workOrderTypeUpdate(data).then(res => {
          if (res.data.retCode === 200) {
            this.$message({
              message: '更新成功',
              type: 'success'
            })
            this.$router.push('/workType')
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        })
      } else {
        workOrderTypeCreate(data).then(res => {
          if (res.data.retCode === 200) {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
            this.$router.push('/workType')
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        })
      }
    },
    refForm (formName, err) {
      let that = this
      let result = new Promise(function (resolve, reject) {
        if (!(formName == 'workordertypeformInfo' || formName == 'newworkordernodeInfo')) {
          if (!that.$refs[formName].length > 0) {
            resolve()
          } else {
            that.$refs[formName][0].validate(valid => {
              if (valid) {
                resolve()
              } else {
                reject(err)
              }
            })
          }
        } else {
          that.$refs[formName].validate(valid => {
            if (valid) {
              resolve()
            } else {
              reject(err)
            }
          })
        }
      })
      that.resultArr.push(result)
    }
  }
}
</script>

<style scoped>
.createworkordertype {
  font-family: Microsoft YaHei;
  color: #231815;
}
.order_flow_system {
  font-weight: bold;
  color: #231815;
  padding-bottom: 10px;
  width: 80%;
  margin: 0 auto;
  padding-left: 10px;
}
.el-card {
  font-size: 12px;
  width: 80%;
  margin: auto;
}
>>> .el-card__header {
  background: #f7f7f7;
}
.worktypecard {
  border: none;
}
.worktypecard >>> .el-card__body {
  text-align: left;
  padding: 0px;
}
.nodecard >>> .el-card__body {
  height: 400px;
  overflow: auto;
  padding: 0px;
  background-color: #f4f6f9;
}
.nodecard >>> .el-card__header {
  padding: 8px;
}
.button {
  color: #2c97f1;
  border: none;
  background-color: #ffffff;
  padding-left: 0;
  padding-top: 10px;
  cursor: pointer;
  background-color: #f4f6f9;
}
.selectnodecss,
.unselectnodecss {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 30px;
  background-color: #f4f6f9;
  padding: 0 5px;
}
.selectnodecss {
  border: 1px #85c5ff solid;
  background: #edf8ff;
  border-radius: 4px;
  color: #85c5ff;
}
.unselectnodecss {
  background-color: #f4f6f9;
}
.title-txt {
  font-size: 12px;
  font-weight: bold;
  line-height: 25px;
}
.sequence_flow_btn {
  padding-top: 18px;
  background: none;
  margin-right: 20px;
}
.font-weight {
  padding: 0 5px;
}
.delnodebtn {
  line-height: 30px;
  margin-right: 10px;
  float: right;
}
.delsequenceflowbtn {
  font-size: 22px;
  line-height: 30px;
}
>>> .nodecard[data-v-4356b43a] .el-card__header {
  font-weight: 700;
}
>>> .el-breadcrumb__separator {
  color: #b50029;
  font-weight: 700;
  padding-top: 1px;
  cursor: pointer;
}

.rebuild_order >>> .el-breadcrumb__inner {
  font-weight: 600 !important;
  color: #231815 !important;
  font-size: 18px;
  font-family: Microsoft YaHei;
}
.el-icon-arrow-left {
  font-size: 16px;
  color: #b60028;
  font-weight: 700;
  padding: 0 5px;
  cursor: pointer;
}

.worktypecard >>> .el-form-item__label {
  text-align: right;
}
.problem_content >>> .el-form-item__content {
  margin-left: 90px;
}
.form_item_btn {
  margin-bottom: 10px;
}
.form_item_btn >>> .el-form-item__label {
  width: 100px !important;
}
.noNodeInfo {
  height: 30px;
  background: none;
  border: 1px solid #f56c6c;
}
.visiableRangle >>> .el-form-item__content {
  display: flex;
}
</style>
